<!--
* @author wn
* @date 2023/03/07 13:46:33
* @description: 主页左侧 菜单栏
!-->
<template>
	<a-layout-sider :collapsed="collapsed" :trigger="null" collapsible>
		<logo />
		<!-- :selectedKeys="selectedKeys" -->
		<a-menu
			:openKeys="openKeys"
			:selectedKeys="selectedKeys"
			mode="inline"
			theme="light"
			@click="clickHandle"
			@openChange="onOpenChange"
			@select="onSelect"
		>
			<template v-for="item in menus" :key="item.id">
				<template v-if="!item.children">
					<a-menu-item :key="item.path">
						<template #icon v-if="icon2To3(item.meta?.icon)">
							<Icon :icon="icon2To3(item.meta?.icon)" />
						</template>
						{{ item.meta?.title }}
					</a-menu-item>
				</template>
				<template v-else>
					<sub-menu :menu-info="item" />
				</template>
			</template>
		</a-menu>
	</a-layout-sider>
</template>
<script setup>
import Logo from '@/components/tools/Logo'
import { Icon } from '@/antd/icons'
import { icon2To3 } from '@/utils/iconMap'
import SubMenu from './SubMenu'
import { inject, ref, watch } from 'vue'
import {
	recursiveParentNodeFIrst,
	recursiveSelectedKeys,
} from '@/utils/menuUtil'

const data = defineProps({
	menus: {
		type: Array,
		default: () => [],
		required: true,
	},
	collapsed: {
		type: Boolean,
		default: false,
	},
})
// 当前默认展开的 SubMenu 菜单项
const openKeys = ref([data.menus[4].path])

// 当前默认选中的菜单项
// 工程管理--工艺流程 [data.menus[4].children[0].path]
// const selectedKeys = ref('')

// 点击关闭 tag menu对应 选中 打开   是数组 []
const selectedKeys = inject('tagPath')

// 监视 selectedKeys  -- onOpenChange
// 获取的 数组 不需要翻转  应将  孙子-儿子-爹 排序  不然 打不开
// clickHandle 不触发
watch(selectedKeys, newValue => {
	const openKeys = []
	recursiveSelectedKeys(newValue[0], data.menus, openKeys)
	/* 	if (openKeys.length > 0) {
		openKeys = openKeys.reverse()
	} */
	// 只展开当前父级菜单,保持菜单聚焦简洁
	onOpenChange(openKeys)
})

const emit = defineEmits(['menuClick'])

// 点击 menuItem 切换选中 item
const clickHandle = ({ key }) => {
	// 点击同一个 menu
	if (selectedKeys.value[0] === key) return
	// 更改 默认 当前选中的菜单项
	// selectedKeys.value = ['']
	selectedKeys.value = [key]
	// 向 GlobalLayout 发射 id:path  查找 route
	emit('menuClick', key)
}

// 被选中时调用
// 根据 keyPath触发 打开
/* const onSelect = ({ keyPath }) => {
	onOpenChange(keyPath)
} */

/**
 * 只展开当前父级菜单,保持菜单聚焦简洁
 * openKeys全部关闭 []
 * 打开几个 [key1,key2,key3]
 * 有根节点的 需要 ['根'，'子']
 * 应将  孙子-儿子-爹 排序  不然 打不开
 */
// 第一层根节点
const rootSubmenuKeys = recursiveParentNodeFIrst(data.menus).map(
	menu => menu.path
)
const onOpenChange = keys => {
	// 应将  keys:孙子-儿子-父 排序  不然 latestOpenKey 是外层的 父 是父节点 打不开
	const latestOpenKey = keys.find(key => openKeys.value.indexOf(key) === -1)
	// 不是父节点  需要 全部添加
	if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
		openKeys.value = keys
	} else {
		// 父节点
		openKeys.value = latestOpenKey ? [latestOpenKey] : []
	}
}
</script>
<style scoped lang="less">
.ant-layout-sider {
	min-height: 100vh;
	background-color: #fff;
	/* 	.ant-menu {
		// background-color: #ccc;
	} */
}
</style>
